<template>
	<view>
		<view class="view-box-1">
			<view class="view-box-1-left">
				<view class="box1-left-text1">奥迪 奥迪A4</view>
				<view class="box1-left-text2">2007款 奥迪A4 1.8T手动舒适型</view>
				<view class="view-right-box" @click="btnClick(1)">
					<view class="box1-left-text3">更换车型</view>
					<image class="view-box-1-image" src="@/static/rightArrow81.png"></image>
				</view>
			</view>
			<image class="view-box-1-left" src="@/static/carbg.png" mode="widthFix"></image>
		</view>
		<view class="view-box-2">
			<view class="view-box-2-left">
				<view class="box2-text1">NEDC综合油耗 (L/100km)</view>
				<view class="box2-text2">0</view>
			</view>
			<view class="view-box-2-left">
				<view class="box2-text1">排量（L）</view>
				<view class="box2-text2">1.5</view>
			</view>
		</view>
		<view class="view-box-2">
			<view class="view-box-2-left">
				<view class="box2-text1">变速箱</view>
				<view class="box2-text2">2档DHT</view>
			</view>
			<view class="view-box-2-left">
				<view class="box2-text1">整车质保</view>
				<view class="box2-text2">5年/15万公里</view>
			</view>
		</view>
		<summarizeList :data="dataList1" :listTitle="listTitle1"></summarizeList>
		<summarizeList :data="dataList1" :listTitle="listTitle1"></summarizeList>
		<summarizeList :data="dataList1" :listTitle="listTitle1"></summarizeList>
		<summarozeListRow :data="safeListData" :title='safeTitle'/>
		<summarizeList :data="dataList1" :listTitle="listTitle1"></summarizeList>
	</view>
</template>

<script>
	import summarizeList from "../carConfig/components/summarizeList.vue";
	import summarozeListRow from "../carConfig/components/summarozeListRow.vue";
	export default {
		components:{
			summarizeList,summarozeListRow
		},
		data() {
			return {
				safeTitle:'安全配置',
				listTitle1:'车身',
				dataList1:[{
					"title":'车身结构',
					"content":'5门5座SUV'
				},{
					"title":'长度（mm）',
					"content":'4875'
				},{
					"title":'宽度（mm）',
					"content":'4875'
				},{
					"title":'高度（mm）',
					"content":'4875'
				},{
					"title":'轴距（mm）',
					"content":'4875'
				},],
				safeListData:[{
					"icon":'https://img2.baidu.com/it/u=1114729443,1120710416&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
					"name":'主/副驾驶座 安全气囊'
				},{
					"icon":'',
					"name":'前/后排侧气囊安全气囊'
				},{
					"icon":'',
					"name":'前/后排头部 气囊 (气帘)'
				},{
					"icon":'',
					"name":'胎压监测功能'
				}]
			}
		},
		methods: {
			btnClick(inta) {
				this.$utils.log("点击了按钮" + inta)
				switch (inta + "") {
					case "1": {
						this.$utils.log("1")
						break;
					}
					case "2": {
						this.$utils.log("2")
						break;
					}
				}
			}
		}
	}
</script>

<style>
	page {
		background: white;
	}

	.view-box-1 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background: linear-gradient(to right, #DCE0F8, #fff);
		border-radius: 20rpx;
		margin: 20rpx;
	}



	.view-box-1-image {
		width: 13.38rpx;
		height: 24rpx;
		margin-left: 12rpx;
	}

	.view-box-1-left {
		flex: 1;

	}

	.view-right-box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.box1-left-text1 {
		font-size: 32rpx;
		font-family: Alimama ShuHeiTi;
		font-weight: bold;
		color: #1D2125;
		opacity: 1;
		
		
	}

	.box1-left-text2 {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #1D2125;
		opacity: 1;
		margin: 10rpx 0rpx;
	}

	.box1-left-text3 {
		margin: 10rpx 0rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #1D2125;
		opacity: 0.56;
	}

	.view-box-2 {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 10rpx;
	}

	.view-box-2-left {
		flex: 1;
		background-color: #F1F5FE;
		margin: 0rpx 10rpx;
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
		
	}

	.box2-text1 {
		margin-top: 20rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		opacity: 1;
		margin-left: 12rpx;
	}

	.box2-text2 {
		margin-top: 14rpx;
		margin-bottom: 18rpx;
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: center;
		font-weight: bolder;
		
		font-size: 32rpx;
		font-family: DIN Alternate;
		font-weight: bold;
		color: #0E59EA;
		opacity: 1;
	}
	
	.list-title-view{
		width: 100%;
		color: black;
		padding: 10rpx 20rpx ;
		background-color: #F5F5F5;
		margin-top: 30rpx;
	}
</style>